<script setup lang="ts">
import { onMounted } from "vue";
import { FrontProcessing } from "@/FrontProcessing";
import { useCoreStore } from "@/UI/store";
import { _global } from "@/UI/store";
import { Bucket, oss } from "../config";
import { RenderMode } from "@/FrontProcessing";

const coreStore = useCoreStore();
let selectBox: HTMLElement | null = null; // 对选择框进行移动，或者设置选择框的大小。

onMounted(() => {
  const appDom = document.getElementById("canvas");
  const father = document.getElementsByClassName("editor-wrapper")[0];
  selectBox = document.getElementById("select-box");
  if (father) {
    (appDom as HTMLElement).style.width = father.clientWidth + "px";
    (appDom as HTMLElement).style.height = father.clientHeight + "px";
  }
  if (appDom !== null && selectBox != null) {
    const engine = new FrontProcessing(appDom, selectBox, {
      config: {
        oss: oss(),
        bucket: Bucket(),
      },
      renderMode: RenderMode.WEB,
    });
    _global.Engine = engine;
    coreStore.Notify.next({
      event: "engine_ready",
    });
  }
});
</script>

<template>
  <div class="editor-wrapper">
    <div id="canvas"></div>
    <div id="select-box"></div>
  </div>
</template>

<style scoped lang="less">
.editor-wrapper {
  width: 100%;
  height: 100%;
}

#select-box {
  position: fixed;
  width: 0px;
  height: 0px;
  background-color: rgba(100, 100, 100, 0.3);
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 1000;
}
</style>
